<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
    <link rel="stylesheet" href="layui-v2.8.18/layui/css/layui.css">
    <script src="js/jQuery.js"></script>
</head>
<body>
<!--导航栏-->
<div class="nav">

    <div class="layui-row">
        <div class="layui-col-md7">
            <div class="grid-demo grid-demo-bg1">
                <div>
                    <img src="image/cake.png" alt="">
                    <span>蛋糕商城</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <!--                <img src="images/user.png" alt="">-->
                <span>首页</span>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogList.html">
                    <!--                    <img src="images/collect.png" alt="">-->
                    <span>商品分类</span>
                </a>
            </div>
        </div>

        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogPublish.html">
                    <!--                    <img src="images/write.png" alt="">-->
                    <span>我的订单</span>
                </a>
            </div>
        </div>

        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="login.html">
                    <!--                    <img src="images/login.png" alt="">-->
                    <span>登录</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="#">
                    <!--                    <img src="images/register.png" alt="">-->
                    <span>注册</span>
                </a>
            </div>
        </div>
    </div>
</div>


<div class="register">
    <div class="register-center">
        <form class="layui-form" onsubmit="return false">
            <div class="demo-reg-container">
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-email"></i>
                        </div>
                        <input type="text" name="fname" value="" id="email" lay-verify="required" placeholder="邮箱"
                               autocomplete="off" class="layui-input" lay-affix="clear" required="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-form"></i>
                        </div>
                        <input type="text" name="fname" value="" id="name" lay-verify="required" placeholder="姓名"
                               autocomplete="off" class="layui-input" lay-affix="clear" required="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-cellphone"></i>
                        </div>
                        <input type="text" name="fname" value="" id="phone" lay-verify="required" placeholder="手机号"
                               autocomplete="off" class="layui-input" lay-affix="clear" required="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-location"></i>
                        </div>
                        <input type="text" name="fname" value="" id="address" lay-verify="required" placeholder="地址"
                               autocomplete="off" class="layui-input" lay-affix="clear" required="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="fname" value="" id="username" lay-verify="required"
                               placeholder="用户名"
                               autocomplete="off" class="layui-input" lay-affix="clear" required="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="fname" value="" lay-verify="required" placeholder="密码"
                               autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye"
                               required="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="fname" id="password" value=""
                               lay-verify="required|confirmPassword" required="required"
                               placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
                    </div>
                </div>


                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" id="submit" lay-submit lay-filter="demo-reg">注册</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="js/jquery.js"></script>
<script>
    let email = document.querySelector('#email');
    let name = document.querySelector('#name');
    let phone = document.querySelector('#phone');
    let address = document.querySelector('#address');
    let username = document.querySelector('#username');
    let password1 = document.querySelector('#reg-password');
    let password2 = document.querySelector('#password');
    let submit = document.querySelector('#submit');

    submit.onclick = function () {
        if (password1.value !== password2.value) {
            alert('两次密码输入不一致,请重新输入!');
            password2.focus();
            return;
        }
        $.ajax({
            type: 'post',
            url: '/user/register',
            data: {
                email: email.value,
                name: name.value,
                phone: phone.value,
                address: address.value,
                username: username.value,
                password: password1.value,
            },
            success: function (body) {
                if (body != null && body.code === 200 && body.data === 1) {
                    location.assign('/login.html');
                } else {
                    alert('注册失败!');
                }
            },
            error: function () {
                alert('注册失败!');
            }
        });
    }
</script>
</body>
</html>